import * as echarts from 'echarts'
import {useFindEmptyDataIndex} from '@/hooks'

/**
 * 多纵坐标折线图
 * @param el
 * @param params
 * @author 赵京涛
 */
export const useMultipleOrdinatesLineCharts = (el, params) => {
  const { startIndex, endIndex } = useFindEmptyDataIndex(params.seriesData)
  const startPercentage = ((startIndex - 1) / params.xData.length).toFixed(2) * 100
  const endPercentage = 100 - ((endIndex / params.xData.length).toFixed(2) * 100)
  const myChart = echarts.init(el)
  const option = {
    title: {},
    color: params.colors,
    // 框浮层内容格式器  提示框组件
    tooltip: {
      trigger: 'axis',
      className: 'tooltipBox',
      axisPointer: {
        type: 'cross'
      },
      show: true,
      formatter: function(paramsValue) {
        let result = paramsValue[0].name + '<br>'
        for (let i = 0; i < paramsValue.length; i++) {
          if (paramsValue[i].seriesName === '水质类别') {
            const value = paramsValue[i].value
            let category
            switch (value) {
              case 1:
                category = '一类'
                break
              case 2:
                category = '二类'
                break
              case 3:
                category = '三类'
                break
              case 4:
                category = '四类'
                break
              case 5:
                category = '劣四类'
                break
              default:
                category = ''
            }
            result += paramsValue[i].marker + ' ' + paramsValue[i].seriesName + ': ' + category + '<br>'
          } else {
            result += paramsValue[i].marker + ' ' + paramsValue[i].seriesName + ': ' + paramsValue[i].value + '<br>'
          }
        }
        return result
      },
      confine: true,
      // 允许鼠标进入提示框浮层中
      enterable: true,
      extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);max-width:340px;max-height:27vh;overflow:auto'
    },
    // 工具配置项
    toolbox: {
      show: true,
      // 距离X轴距离
      top: '50px',
      right: '50px',
      feature: {
        saveAsImage: {
          show: true,
          name: params['saveAsImageTitle'],
          title: '将' + params['saveAsImageHoverMsg'] + '（统计图）保存为图片'
        }
      }
    },
    // 位置
    grid: {
      top: params.gridTop,
      left: params.gridLeft,
      right: params.gridRight,
      bottom: params.gridBottom
    },
    // X轴区域缩放
    dataZoom: [
      {
        type: 'inside',
        start: startPercentage,
        end: endPercentage
      },
      {
        start: 0,
        end: 10,
        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
        handleSize: '80%',
        handleStyle: {
          color: '#fff',
          shadowBlur: 3,
          shadowColor: 'rgba(0, 0, 0, 0.6)',
          shadowOffsetX: 2,
          shadowOffsetY: 2
        }
      }],
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: params.xData,
      axisLabel: {
        interval: 0,
        rotate: params['rotateDage'],
        color: '#fff'
      },
    },
    yAxis: params.yData,
    series: params.seriesData
  }
  /**
   * 监听隐藏和显示图例的回调函数
   */
  myChart.on('legendselectchanged', function(params) {
    const selected = params.selected
    const series = option.series
    // 筛选出值为true的属性
    const filterSelected = Object.fromEntries(Object.entries(selected).filter(([value]) => value))
    // 获取筛选后的对象的key集合
    const filteredKeys = Object.keys(filterSelected)
    // 筛选目标数组中没有的数据
    for (let i = 0; i < series.length; i++) {
      const name = series[i].name
      if (!selected[name]) {
        series[i].itemStyle = {
          normal: {
            // 隐藏折线图
            display: 'none'
          }
        }
        // 隐藏对应的纵坐标
        option.yAxis[i].show = false
      } else {
        series[i].itemStyle = {
          normal: {
            // 显示折线图
            display: 'block'
          }
        }
        // 显示对应的纵坐标
        option.yAxis[i].show = true
      }
    }
    option && myChart.setOption(option)
  })
  // 调用 clear 方法清空图表中的数据
  myChart.clear()
  /**
   * 添加事件监听器来捕捉下载图例的点击事件
   */
  option && myChart.setOption(option)
  window.onresize = function() {
    myChart.resize()
  }
}
